Element UI上传组件实现文件上传

vue页面代码展示

<template>
	<div>
		<!--
			path:  文件上传时触发的后台接口
			list-type: 文件列表类型
			multiple: 多文件上传
			imageNumber: 文件上传的最大数量
			headers: 文件上传请求中添加数据
			fileUploading: 文件上传前触发的方法
			fileExceed: 文件上传数量超出限制时触发的方法
			fileSuccess: 文件上传成功触发的方法
			fileError: 文件上传失败触发的方法
			filePreview: 点击已上传的文件时触发的方法
			fileRemove: 点击已上传文件的X号或选中已上传的文件按下delete键时触发的方法
			http-request: 自定义文件上传方法,使用该方法后Element提供的方法将会失效
		-->
		<el-upload style="padding-left: 14px" :action="path" list-type="picture-card" multiple :limit="imageNumber"
					   :headers="headers" :before-upload="fileUploading" :on-exceed="fileExceed"
                       :on-success="fileSuccess" :on-error="fileError" :on-preview="filePreview" :on-remove="fileRemove">
			<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img style="margin-left: 35px" :src="imageUrl" alt="">
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: "fileUpload",
		data(){
			return{
				imageNumber: 7,
				imageUrl: '',
				dialogVisible: false,
				fileids: [],
				path: 'http://127.0.0.1:9000/file/uploadfile'
			}
		},
		computed: {
      		headers() {
        		return {
          			token: this.$store.getters.token
        		}
      		}
    	},
    	methods: {
    		/* 文件上传前触发的方法 */
    		fileUploading(file) {

        		const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        		const isLt5M = file.size / 1024 / 1024 < 5;

        		if (!isJPG) {
          			this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
        		}
        		
        		if (!isLt5M) {
          			this.$message.error('上传头像图片大小不能超过 5MB!');
       	 		}
       	 		
        		return isJPG && isLt5M;
        		
      		},
      		/* 文件上传数量超出限制时触发的方法 */
      		fileExceed(files, fileList) {
        		this.$message.error('上传图片超出上限,只允许上传7张图片');
      		},
      		/* 文件上传成功触发的方法 */
      		fileSuccess(response, file, fileList) {
        		this.ticket.fileIds.push(response.content.id)
      		},
      		/* 文件上传失败触发的方法 */
      		fileRemove(file, fileList) {
        		this.ticket.fileIds.splice(this.ticket.fileIds.indexOf(file.response.content.id), 1)
      		},
      		/* 点击已上传的文件时触发的方法 */
      		filePreview(file) {
        		this.imageUrl = file.url;
        		this.dialogVisible = true;
      		},
      		/* 点击已上传文件的X号或选中已上传的文件按下delete键时触发的方法 */
      		fileRemove(file, fileList) {
        		this.ticket.fileIds.splice(this.ticket.fileIds.indexOf(file.response.content.id), 1)
      		},
      		/* 自定义文件上传方法,使用该方法后Element提供的方法将会失效 */
      		uploadFile(param, file){

        		let data = new FormData();

        		data.append("file", param.file)

        		saveFile(data).then((response)=>{

          			this.$message.info('上传成功');

          			this.ticket.fileIds.push(response.content.id)
          			
        		})
      		}
    	}
	}
</script>

后端代码

import java.io.File;
import java.util.Date;
import java.util.UUID;
import java.io.IOException;
import java.text.SimpleDateFormat;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/admin/file")
public class FileController {
	@PostMapping("/uploadfile")
    public ResponseDto<FileDto> uploadfile(@RequestParam MultipartFile file) throws IOException {

        ResponseDto<FileDto> responseDto = new ResponseDto<>();

        /* 文件名称,包含后缀 */
        String filename = file.getOriginalFilename();
        /* 生成自定义文件名称 */
        String uuid = UUID.randomUUID().toString();
        /* 文件后缀 */
        String suffix = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
        /* 上传时间 */
        String date = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        /* 拼接上传名称 */
        String fileName = uuid + "." + suffix;
        /* 文件上传路径 */
        String path = "F:/file/" + date + "/" + fileName;

        File file1 = new File(path);
        
        /* 判断文件路径是否存在,不存在则创建 */
        if (!file1.getParentFile().exists()) {
            file1.getParentFile().mkdirs();
        }

        file.transferTo(file1);
        
        /* 保存并向前端返回数据 */
        FileDto fileDto = new FileDto();

        fileDto.setPath(date + "/" +fileName);
        fileDto.setName(fileName);
        fileDto.setSize(Math.toIntExact(file.getSize()));
        fileDto.setSuffix(suffix);
        fileDto.setUse("");
        fileDto.setKey(uuid);
        fileDto.setId(fileService.save(fileDto));

        responseDto.setContent(fileDto);

        return responseDto;

    }
}